<!DOCTYPE html>
<html>
<head>
    <title>销售产品</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            display: flex;
            flex-direction: column;
            align-items: center; /* 垂直居中 */
        }
        h1 {
            color: #333;
            margin: 20px 0;
        }
        .flash {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            width: 80%;
            text-align: center;
        }
        .flash.error {
            background-color: #ffe6e6;
            border-color: #ffcccc;
            color: #b30000;
        }
        .flash.success {
            background-color: #e6ffe6;
            border-color: #ccffcc;
            color: #006600;
        }
        form {
            max-width: 400px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f9f9f9;
            width: 80%;
        }
        label {
            display: block;
            margin: 10px 0;
        }
        input[type="text"],
        input[type="number"],
        input[type="file"],
        input[type="date"],
        select,
        textarea {
            width: calc(100% - 20px); /* 减去左右 padding */
            
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #0056b3;
        }
        a {
            display: block;
            margin: 10px 0;
            text-decoration: none;
            color: #007BFF;
            font-size: 16px;
            text-align: center;
            width: 80%;
        }
        a:hover {
            text-decoration: underline;
        }
        .payment-method {
            display: flex;
            gap: 10px;
            margin: 10px 0;
        }
        .payment-method label {
            margin: 0;
        }
        .disabled {
            opacity: 0.5;
            pointer-events: none; /* 禁用点击事件 */
        }
    </style>
</head>
<body>
    <h1>销售产品</h1>
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="flash {{ category }}">{{ message }}</div>
            {% endfor %}
        {% endif %}
    {% endwith %}
    <form method="POST">
        <label>产品ID: <input type="number" name="product_id" value="{{ product_id }}" readonly></label><br>
        {% if product %}
            <label>产品名称: {{ product.name }}</label><br>
            <label>标签价格: {{ product.price }} 元</label><br>
        {% else %}
            <div style="color: red;">产品不存在，请检查产品ID。</div>
        {% endif %}
        <label>销售数量: <input type="number" name="quantity" min="1" required></label><br>
        <label>销售单价: <input type="number" name="sale_price" step="0.01"></label><br>
        <label>折扣: <input type="number" name="discount" min="0.0" max="1.0" step="0.0001" value="1.0"></label><br>
        <label>销售日期: <input type="date" name="sale_date" value="{{ today_date }}" required></label><br>
        <label>销售人: <input type="text" name="salesperson" required></label><br>
        <label>备注: <textarea name="notes" rows="4"></textarea></label><br>

        <!-- 客户选择 -->
        <label>选择客户:
            <select name="customer_id" id="customer-select">
                <option value="">散户</option> <!-- 默认选项 -->
                {% for customer in customers %}
                    <option value="{{ customer.id }}">{{ customer.name }}</option>
                {% endfor %}
            </select>
        </label><br>

        <!-- 支付方式选择 -->
        <div class="payment-method" id="payment-method">
            <label>支付方式:</label>
            <label><input type="radio" name="payment_method" value="cash" checked> 现金</label>
            <label><input type="radio" name="payment_method" value="prepaid" id="prepaid-radio"> 预存金额</label>
        </div>

        <button type="submit">销售</button>
    </form>
    <a href="{{ url_for('list_products') }}">返回产品列表</a>
    <a href="{{ url_for('index') }}">返回主页</a>

    <script>
        // 获取客户选择下拉菜单和预存金额支付选项
        const customerSelect = document.getElementById('customer-select');
        const prepaidRadio = document.getElementById('prepaid-radio');
        const paymentMethodDiv = document.getElementById('payment-method');

        // 监听客户选择的变化
        customerSelect.addEventListener('change', function() {
            if (this.value === "") {
                // 如果选择的是散户，禁用预存金额支付方式
                prepaidRadio.disabled = true;
                paymentMethodDiv.classList.add('disabled');
            } else {
                // 如果选择的是具体客户，启用预存金额支付方式
                prepaidRadio.disabled = false;
                paymentMethodDiv.classList.remove('disabled');
            }
        });

        // 页面加载时初始化状态
        window.onload = function() {
            if (customerSelect.value === "") {
                // 如果默认选择的是散户，禁用预存金额支付方式
                prepaidRadio.disabled = true;
                paymentMethodDiv.classList.add('disabled');
            }
        };
    </script>
</body>
</html>